<template>
  <div class="notice-bar" :style="{ width: noticeWidth + 'rpx' }">
    <!-- 修改了这里，设置了文字高度和单行显示 -->
    <div 
      class="notice-content" 
      :style="{ 
        animationDuration: animationDuration + 's', 
        left: noticeLeft + 'rpx', 
        lineHeight: props.textHeight + 'rpx', 
        textOverflow: 'ellipsis',
        fontSize: props.fontSize + 'rpx' // 新增绑定文字大小
      }"
    >
      {{ text }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import { noticeBarProps } from './NoticeBar.type';

const props = defineProps(noticeBarProps);

const noticeWidth = ref(props.width);
const noticeLeft = ref(noticeWidth.value);
const animationDuration = ref(0);

const calculateAnimationDuration = () => {
  const textLength = props.text.length * 16; // 假设每个字符宽度为 16px
  animationDuration.value = textLength / props.speed * 10;
};

onMounted(() => {
  calculateAnimationDuration();
  const interval = setInterval(() => {
    if (noticeLeft.value <= -noticeWidth.value) {
      noticeLeft.value = noticeWidth.value;
    } else {
      noticeLeft.value -= 1;
    }
  }, 10);
});

watch(() => props.text, () => {
  calculateAnimationDuration();
  noticeLeft.value = noticeWidth.value;
});
</script>

<style scoped>
.notice-bar {
  position: relative;
  overflow: overlay;
  /* background-color: black; */
  color: #f8ff00;
}

.notice-content {
  position: absolute;
  white-space: nowrap;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* 移除原有的 line-height 样式，改为在模板中绑定 */
  /* line-height: var(--text-height); */
}
</style>./NoticeBar.type